<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {getVerificationPageAPI} from "@/apis/verification.ts";
//中间岗列表
const data = <any>reactive([]);
const getVerificationList = async () => {
  const res = await getVerificationPageAPI({
    pageCurrent: pagination.value.current,
    pageSize: pagination.value.pageSize,
    verificationType: verificationType.value,
    verificationStatus: null,
    searchName: searchName.value
  });
  if (res.data.flag) {
    pagination.value.total = res.data.data.total
    data.push(...res.data.data.data)
  } else {
    message.error(res.data.message)
  }
}
//生命周期
onMounted(() => {
  getVerificationList();
})

const columns = [
  {
    title: '提交单位',
    dataIndex: 'verificationCreater',
    key: 'verificationCreater',
    width: 150,
  },
  {
    title: '审核状态',
    dataIndex: 'verificationStatus',
    key: 'verificationStatus',
    width: 120,
  },
  {
    title: '提交时间',
    dataIndex: 'verificationCreateDate',
    key: 'verificationCreateDate',
    width: 120,
    customRender: ({text}: { text: string }) => {
      const date = new Date(text);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  {
    title: '认证备注',
    dataIndex: 'verificationRemarks',
    key: 'verificationRemarks',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 120,
  },
];
// 分页配置
const pagination = ref({
  current: 1, // 当前页码，初始为第 1 页
  pageSize: 8, // 每页显示的记录数
  total: 0, // 数据总条数
});

// 处理表格变化（如分页、排序、筛选）的回调函数
const handleTableChange = (paginationInfo: any) => {
  console.log(paginationInfo)
  pagination.value.current = paginationInfo.current;
  pagination.value.pageSize = paginationInfo.pageSize;
  data.splice(0, data.length);
  getVerificationList();
};
//编辑
const router = useRouter();
const verificationName=ref<string>('');
const goToVerificationDetail = (verificationId: string) => {
  if (verificationType.value === '企业认证') {
    verificationName.value = 'verificationAndEmployerDetail'
  } else if (verificationType.value === '学生认证') {
    verificationName.value = 'verificationAndJobseekerDetail'
  } else if (verificationType.value === '荣誉认证') {
    verificationName.value = 'verificationAndResumeDetail'
  }



  router.push({
    name: verificationName.value,
    params: {
      verificationId: verificationId // 确保传递的参数为字符串类型
    }
  });
};
//左边导航栏
const verificationType = ref<string>('企业认证');
const listTitle = ref<string>('企业审核列表');//列表标题

//搜索
const searchName = ref<string>('');

const onSearch = () => {
  data.splice(0, data.length);
  getVerificationList();
};
//筛选
const check = () => {
  console.log("筛选了----" + verificationType.value)
  if (verificationType.value === '企业认证') {
    listTitle.value = '企业审核列表'
  } else if (verificationType.value === '学生认证') {
    listTitle.value = '学生审核列表'
  } else if (verificationType.value === '荣誉认证') {
    listTitle.value = '荣誉审核列表'
  }
  data.splice(0, data.length);
  getVerificationList();
}
</script>

<template>
  <div class="check">
    <div class="left">
      <a-radio-group v-model:value="verificationType" button-style="solid" @change="check">
        <a-radio-button class="create-button" value="企业认证">企业审核</a-radio-button>
        <a-radio-button class="create-button" value="学生认证">学生审核</a-radio-button>
        <a-radio-button class="create-button" value="荣誉认证">荣誉审核</a-radio-button>
      </a-radio-group>
    </div>
    <div class="main">
      <div class="title">
        <h1>{{ listTitle }}</h1>
      </div>
      <div class="content_table">
        <a-input-search
            v-model:value="searchName"
            allowClear="true"
            enter-button
            placeholder="搜索-提交单位"
            size="large"
            style="width: 50%;margin-bottom: 10px"
            @search="onSearch"
        />
        <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-button v-if="record.verificationStatus==='待审核'" ghost type="primary"
                        @click="goToVerificationDetail(record.verificationId)">去审核
              </a-button>
              <a-button v-else
                        style="color: white;background-color: #67C23A"
                        @click="goToVerificationDetail(record.verificationId)">
                去查看
              </a-button>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.check {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;

  .main {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: calc(100% - 200px);
    height: 100%;
    padding: 0 30px;
    margin-left: 20px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 基础的阴影样式 */
  }

  .left {
    display: flex;
    justify-content: center;
    width: 230px;
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 基础的阴影样式 */
    padding-top: 3px;

    .create-button {
      line-height: 50px; /* 把行高设置成和按钮高度一样 */
      text-align: center;
      margin-bottom: 3px;
      border-radius: 10px;
      box-sizing: border-box; /* 确保边框不会增加额外宽度 */
      width: 100%;
      height: 50px;
    }
  }
}
</style>
